<template>
  <div class="mainPage">
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="245px">
        <el-menu
          style="background: #f2f2f2; border-right: none"
          class="el-menu-vertical-demo"
          :router="true"
          :collapse="isCollapse"
          v-if="navList && navList.length"
        >
          <div class="user">
            <i class="iconfont icon-yonghu tou"></i>
           
            <div class="changeLang">
              <!-- <i style="cursor: pointer" @click="ChangeLanguage(lang)">{{
                  lang
                }}</i> -->
              <div class="info">
                <p class="name" v-if="user">{{ user.username }}</p>
                <span class="iwrap">
                  <el-popover
                    v-if="userStr"
                    placement="right"
                    popper-class="popover"
                    width="150px"
                    trigger="click"
                  >
                    <div class="qrcode" ref="qrCodeUrl"></div>
                    <p style="text-align: center">{{ $t("Home_mobile") }}</p>
                    <i class="el-icon-full-screen" slot="reference"></i>
                  </el-popover>
                  &nbsp;

                  <router-link
                    tag="i"
                    class="iconfont icon-yonghushezhi"
                    to="/MyInfo"
                    style="cursor: pointer"
                  ></router-link>
                  &nbsp;

                  <i
                    class="iconfont icon-tuichu"
                    style="cursor: pointer"
                    @click="exit"
                  ></i>
                  &nbsp;
                </span>
              </div>
              <el-select @change="ChangeLanguage" v-model="lang" size="mini" placeholder="请选择">
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div v-for="item in navList" :key="item.id" class="nav">
            <router-link tag="div" :to="item.link" class="navItem">
              <i :class="item.icon"></i>
              <span>{{ $t(item.key) }}</span>
            </router-link>
          </div>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header
          style="
            text-align: right;
            font-size: 12px;
            background-color: #067fb5;
            border-radius: 10px 0px 0px 10px;
            margin-bottom: 35px;
          "
          height="80px"
        >
          <h1 class="logo">
            <img src="../../../public/image/logo_2.png" alt="" />
            <p>FAST OS DOCKER</p>
          </h1>
        </el-header>
        <el-main style="padding: 0px 20px 0px 0px">
          <div class="main">
            <transition :name="transitionName" mode="out-in">
              <router-view class="child-view"></router-view>
            </transition>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <myFooter />
  </div>
</template>

<script>
import Vue from "vue";
import {
  Container,
  Menu,
  Slider,
  Aside,
  Header,
  Main,
  Popover,
  select,
  option,
} from "element-ui";
import QRCode from "qrcodejs2";
import navList from "@/router/navList";
// import http from '@/utils/http'
Vue.use(Container);
Vue.use(Menu);
Vue.use(Slider);
Vue.use(Aside);
Vue.use(Header);
Vue.use(Main);
Vue.use(Popover);
Vue.use(option);
Vue.use(select);

export default {
  data() {
    return {
      isCollapse: false,
      user: null, // 登录用户信息
      userStr: null,
      lang: "简体中文",
      qrcode: "",
      transitionName: "slide-right",
      navList: navList,
    };
  },
  computed: {
    options() {
      if (this.$i18n && this.$i18n.messages) {
        return Object.keys(this.$i18n.messages);
      } else {
        return [];
      }
    },
  },
  mounted() {
    this.lang = localStorage.getItem("Language") || this.lang;
    this.user = JSON.parse(localStorage.getItem("user"));
    if (
      this.user.baseURL.indexOf("127.0.0.1") !== -1 ||
      this.user.baseURL.indexOf("localhost") !== -1
    ) {
      const baseURL =
        location.protocol +
        "//" +
        window.returnCitySN.cip +
        ":" +
        location.port;
      this.userStr = `username=${this.user.username}%26token=${this.user.token}%26baseURL=${baseURL}`;
    } else {
      this.userStr = `username=${this.user.username}%26token=${this.user.token}%26baseURL=${this.user.baseURL}`;
    }
    // 获取当前选中的菜单
    this.fetchData();
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "fetchData",
  },
  beforeRouteUpdate(to, from, next) {
    if (to && from) {
      const toDepth = to.path;
      const fromDepth = from.path;
      let trs = this.getId(toDepth) < this.getId(fromDepth);
      this.transitionName = trs ? "slide-right" : "slide-left";
    }
    next();
  },
  methods: {
    ChangeLanguage() {
      this.$i18n.locale = this.lang;
      document.title = this.$t("web_title");
      localStorage.setItem("Language", this.lang);
    },
    creatQrCode() {
      if (!this.user) {
        return;
      }
      if (this.qrcode && this.$refs.qrCodeUrl)
        this.$refs.qrCodeUrl.innerHTML = ""; // 清除代码
      this.$nextTick().then(() => {
        this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: `${this.user.baseURL}?${this.userStr}`, // 需要转换为二维码的内容
          width: 150,
          height: 150,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      });
    },
    // 退出登录，清空cookie，localStorage
    exit() {
      //localStorage.removeItem("baseURL");
      localStorage.removeItem("user");
      localStorage.removeItem("token");
      localStorage.removeItem("userList");
      this.$router.replace("/Login");
    },
    // 获取当前路由判断当前的菜单
    getId(link) {
      let id = 0;
      let navList = this.navList;
      for (let i = 0; i < navList.length; i++) {
        if (navList[i].link === link) {
          id = i;
          return id;
        }
      }
      return id;
    },
    fetchData() {
      this.creatQrCode();
    },
  },
};
</script>

<style lang="scss" scoped>
.mainPage {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .el-container {
    flex-grow: 1;
  }
  .nav {
    .navItem {
      cursor: pointer;
      width: 200px;
      padding: 0 35px;
      box-sizing: border-box;
      background: #fff;
      margin: 8px 0px;
      height: 50px;
      border-radius: 0px 10px 10px 0px;
      line-height: 50px;
      text-align: left;
      transition: width 0.15s;
      i {
        margin-right: 10px;
      }
    }
    .router-link-active {
      width: 240px;
      background: #067fb5;
      color: #fff;
      font-weight: bold;
      i {
        font-size: 18px;
      }
    }
  }
  .user {
    width: 240px;
    height: 80px;
    background: #067fb5;
    border-radius: 0px 10px 10px 0px;
    margin-bottom: 35px;
    color: #fff;
    display: flex;
    align-items: center;
    .tou {
      flex-shrink: 0;
      font-size: 46px;
      text-align: center;
      padding: 0 20px;
    }
    .changeLang {
      flex-grow: 1;
      box-sizing: border-box;
    }
    .info{
      display: flex;
      flex-direction: column;
      .name {
        text-align: center;
      }
      .iwrap{
        text-align: center;
        
      }
    }
    
  }
  .logo {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 43px;
      height: 46px;
    }
    p {
      font-size: 31px;
      color: #fff;
      margin-left: 20px;
    }
  }
  .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
  }
  .main {
    position: relative;
    min-height: 500px;
    height: fit-content;
    overflow: hidden;
  }

  .el-aside {
    color: #333;
  }
  .from {
    border: 1px solid #067fb5;
    border-radius: 15px;
    padding: 20px 10px 20px 10px;
    margin: 10px 0px;
    background: #f7fcff;
    position: relative;
    .title {
      position: absolute;
      top: -14px;
      z-index: 10;
      left: 30px;
      font-size: 18px;
      font-weight: bold;
      background: #f7fcff;
      padding: 0px 5px;
      border-radius: 5px;
    }
  }
  .popover.el-popover.el-popper {
    text-align: center;
    .qrcode {
      display: inline-block;
      img {
        width: 132px;
        height: 132px;
        background-color: #fff; //设置白色背景色
        padding: 6px; // 利用padding的特性，挤出白边
        box-sizing: border-box;
      }
    }
  }
}
.child-view {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
  // position: absolute;
  // top: 0;
  // left: 0;
  width: 100%;
  z-index: 100;
  background: white;
  transition: transform 0.5s;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 0.5s;
}

.slide-right-enter {
  opacity: 0;
  // transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  //transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  //transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  //transform: translate3d(-100%, 0, 0);
}
</style>
